import './Main.scss'
import React from 'react'
import NavHeader from '../../../component/NavHeader/NavHeader.jsx'

class Main extends React.Component {
  constructor(props) {
    super(props)
    //最多输入的数量
    this.maxCount = 140
    this.state = {
      count: this.maxCount,
      startIndex: 0
    }
  }
  
  componentDidMount() {
    this.commentInput.addEventListener('compositionstart', () => {
      this.chineseInputing = true
    })
    this.commentInput.addEventListener('compositionend', (e) => {
      this.chineseInputing = false
      this.onInput(e.target.value)
    })
  }
  
  //改动星星个数
  doEva(i) {
    this.setState({
      startIndex: i + 1
    })
  }
  
  //渲染评分星星
  renderStar() {
    let array = []
    for (let i = 0; i < 5; i++) {
      let cls = i >= this.state.startIndex ? "star-item" : "star-item light"
      array.push(<div onClick={() => this.doEva(i)} key={i} className={cls}></div>)
    }
    return array
  }
  
  //用户输入回调
  onInput(value) {
    let num = value.length
    if (!this.chineseInputing) {
      this.setState({
        count: this.maxCount - num
      })
    }
  }
  
  render() {
    return (
      <div className='content'>
        <NavHeader title='评价'/>
        <div className='eva-content'>
          <div className='star-area'>
            {this.renderStar()}
          </div>
          <div className='comment'>
            <textarea className='comment-input' maxLength='140' placeholder='亲，菜品如何，商家服务是否周到？'
                      onChange={(e) => this.onInput(e.target.value)} ref={(ref) => {
              this.commentInput = ref
            }}>
            </textarea>
            <span className='count'> {this.state.count}</span>
          </div>
          <p className=' one-line product-name'></p>
        </div>
        <div className='submit'>提交评价</div>
      </div>
    )
  }
}

export default Main